<!doctype html><html lang="zh"><head><meta charset="utf-8"><meta name="generator" content="Hexo 4.2.0"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"><meta><meta name="keywords" content="[object Object]"><meta name="description" content="记录基本的语法，方便以后使用时查看，thmeleaf共有1~8个优先级数字越低优先级越高，使用时需要注意"><meta name="author" content="XieZiqian"><title>【老掉牙】thymeleaft3 基本语法 - 谢子乾</title><meta description="记录基本的语法，方便以后使用时查看，thmeleaf共有1~8个优先级数字越低优先级越高，使用时需要注意"><meta property="og:type" content="article"><meta property="og:title" content="【老掉牙】thymeleaft3 基本语法"><meta property="og:url" content="https://wxperia.com/2019/09/02/thymeleaf3%E5%9F%BA%E6%9C%AC%E8%AF%AD%E6%B3%95/"><meta property="og:site_name" content="子乾的个人博客"><meta property="og:description" content="记录基本的语法，方便以后使用时查看，thmeleaf共有1~8个优先级数字越低优先级越高，使用时需要注意"><meta property="og:locale" content="zh_CN"><meta property="article:published_time" content="2019-09-02T05:30:42.000Z"><meta property="article:modified_time" content="2020-12-29T07:28:42.585Z"><meta property="article:author" content="XieZiqian"><meta property="article:tag" content="thymeleaft3"><meta property="twitter:card" content="summary"><meta property="twitter:image" content="https://wxperia.com/img/avatar.png"><script type="application/ld+json">{"@context":"https://schema.org","@type":"BlogPosting","mainEntityOfPage":{"@type":"WebPage","@id":"https://wxperia.com/2019/09/02/thymeleaf3%E5%9F%BA%E6%9C%AC%E8%AF%AD%E6%B3%95/"},"headline":"【老掉牙】thymeleaft3 基本语法","image":["https://blog-status.oss-cn-beijing.aliyuncs.com/blog/img20200303171412.png"],"datePublished":"2019-09-02T05:30:42.000Z","dateModified":"2020-12-29T07:28:42.585Z","author":{"@type":"Person","name":"XieZiqian"},"description":"记录基本的语法，方便以后使用时查看，thmeleaf共有1~8个优先级数字越低优先级越高，使用时需要注意"}</script><link rel="alternative" href="/atom.xml" title="谢子乾" type="application/atom+xml"><link rel="icon" href="https://blog-status.oss-cn-beijing.aliyuncs.com/blog/img20200303171412.png"><link rel="stylesheet" href="https://cdnjs.loli.net/ajax/libs/font-awesome/5.12.0/css/all.min.css"><link rel="stylesheet" href="https://fonts.loli.net/css?family=Ubuntu:400,600|Source+Code+Pro|Monda:300,300italic,400,400italic,700,700italic|Roboto Slab:300,300italic,400,400italic,700,700italic|Microsoft YaHei:300,300italic,400,400italic,700,700italic|PT Mono:300,300italic,400,400italic,700,700italic&amp;amp;subset=latin,latin-ext|Inconsolata|Itim|Lobster.css"><link rel="stylesheet" href="https://cdnjs.loli.net/ajax/libs/highlight.js/9.12.0/styles/atom-one-dark.min.css"><style>body>.footer,body>.navbar,body>.section{opacity:0}</style><script src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" defer></script><link rel="stylesheet" href="https://cdnjs.loli.net/ajax/libs/lightgallery/1.6.12/css/lightgallery.min.css"><link rel="stylesheet" href="https://cdnjs.loli.net/ajax/libs/justifiedGallery/3.7.0/css/justifiedGallery.min.css"><script src="https://cdnjs.loli.net/ajax/libs/pace/1.0.2/pace.min.js"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/wxperia/wxperia.github.io@latest//css/style.min.css"><link rel="stylesheet" href="/css/e-style.css"><script src="https://cdnjs.loli.net/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/gh/wxperia/wxperia.github.io@latest//js/globalUtils.min.js"></script></head><body class="is-3-column has-navbar-fixed-top"><nav class="navbar navbar-main is-fixed-top"><div class="container"><div class="navbar-brand justify-content-center"><a class="navbar-item navbar-logo" href="/"><img src="https://blog-status.oss-cn-beijing.aliyuncs.com/blog/img20200303171412.png" alt="谢子乾" height="28"></a></div><div class="navbar-menu"><div class="navbar-start"><a class="navbar-item" href="/">首页</a><a class="navbar-item" href="/archives">归档</a><a class="navbar-item" href="/categories">分类</a><a class="navbar-item" href="/tags">标签</a><a class="navbar-item" href="/album">相册</a></div><div class="navbar-end"><a class="navbar-item" target="_blank" rel="noopener" title="Download on GitHub" href="https://github.com/removeif"><i class="fab fa-github"></i></a><a class="navbar-item is-hidden-tablet catalogue" title="目录" href="javascript:;"><i class="fas fa-list-ul"></i></a><a class="navbar-item search" title="搜索" href="javascript:;"><i class="fas fa-search"></i></a><a class="navbar-item" id="night-nav" title="Night Mode" href="javascript:;"><i class="fas fa-moon" id="night-icon"></i></a></div></div></div></nav><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/wxperia/wxperia.github.io@latest//js/theme-setting.min.js"></script><section class="section"><div class="container"><div class="columns"><div class="column order-2 column-main is-8-tablet is-8-desktop is-9-widescreen"><div class="card"><article class="card-content article" role="article"><div class="article-meta size-small is-uppercase level is-mobile"><div class="level-left"><i class="far fa-calendar-plus"> </i>2019-09-02  <a class="commentCountImg" href="/2019/09/02/thymeleaf3%E5%9F%BA%E6%9C%AC%E8%AF%AD%E6%B3%95/#comment-container"><span class="display-none-class">24b6ec61d1a2b65e583a0d07ce9c63b4</span><i class="far fa-comment-dots"></i> <span class="commentCount" id="24b6ec61d1a2b65e583a0d07ce9c63b4">99+</span>  </a><span class="level-item"><i class="far fa-clock"> </i>13 分钟  <i class="fas fa-pencil-alt"> </i>2.0 k</span><span class="level-item" id="busuanzi_container_page_pv"><i class="far fa-eye"></i>&nbsp;&nbsp;<span id="busuanzi_value_page_pv">0</span>次访问</span></div></div><h1 class="title is-3 is-size-4-mobile">【老掉牙】thymeleaft3 基本语法</h1><div class="content"><p>记录基本的语法，方便以后使用时查看，thmeleaf共有1~8个优先级数字越低优先级越高，使用时需要注意</p><a id="more"></a><h2 id="常用属性介绍"><a href="#常用属性介绍" class="headerlink" title="常用属性介绍"></a>常用属性介绍</h2><h3 id="1、-th-text-order-7"><a href="#1、-th-text-order-7" class="headerlink" title="1、 th:text order= 7"></a>1、 <code>th:text</code> order= 7</h3><p>设置当前元素的文本内容，相同功能的有<code>th:utext</code>,两者的区别在于</p><p><code>th:text</code>：只会将文本原原本本的转化，不会渲染文本中的<code>html</code>标签</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">th:text</span>=<span class="string">"$&#123;text&#125;"</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure><p><code>th:utext</code>：会渲染<code>html</code>标签</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">th:utext</span>=<span class="string">"$&#123;text&#125;"</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure><ul><li><h4 id="VUE"><a href="#VUE" class="headerlink" title="VUE"></a>VUE</h4><p><code>v-text</code>:</p><p><code>v-html</code>:</p></li><li><h4 id="angularjs"><a href="#angularjs" class="headerlink" title="angularjs"></a>angularjs</h4><p><code>ng-bind</code>: //并不完全只有转化文本的功能，还能单向绑定修改元素的值</p><p><code>ng-bind-html</code>:</p></li></ul><h3 id="2、th-value-order-6"><a href="#2、th-value-order-6" class="headerlink" title="2、th:value order= 6"></a>2、<code>th:value</code> order= 6</h3><p>设置当前元素的value值，类似于修改指定属性的还有<code>th:src</code>,<code>th:href</code></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">th:value</span>=<span class="string">"$&#123;value&#125;"</span>&gt;</span><span class="tag">&lt;/<span class="name">input</span>&gt;</span></span><br></pre></td></tr></table></figure><ul><li><h4 id="VUE-1"><a href="#VUE-1" class="headerlink" title="VUE"></a>VUE</h4><p><code>v-src</code>:</p><p><code>v-value</code>:</p><p>事实上，在vue中只要在需要绑定的属性前，加上<code>:</code>就能够动态的修改这个属性的值</p></li><li><h4 id="angualrjs"><a href="#angualrjs" class="headerlink" title="angualrjs"></a>angualrjs</h4><p><code>ng-src</code>:</p><p>在angualrjs中也只需要在需要修改的属性前加上 <code>ng</code>前缀</p></li></ul><h3 id="3、th-each-order-2"><a href="#3、th-each-order-2" class="headerlink" title="3、th:each order= 2"></a>3、<code>th:each</code> order= 2</h3><p>遍历循环属性，通常与 <code>th:text</code>,<code>th:value</code>一起使用</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">th:each</span>=<span class="string">"message : $&#123;eachlist&#125;"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span> <span class="attr">th:text</span>=<span class="string">"$&#123;message&#125;"</span>&gt;</span> <span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 使用方法二 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span> <span class="comment">&lt;!--只遍历p，推荐使用--&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span> <span class="attr">th:text</span>=<span class="string">"$&#123;message&#125;"</span> <span class="attr">th:each</span>=<span class="string">"message : $&#123;thEach&#125;"</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><ul><li><h4 id="VUE-2"><a href="#VUE-2" class="headerlink" title="VUE"></a>VUE</h4><p><code>v-for</code>: 需要在循环的最外层标签上添加 <code>:key</code> 来确保<code>v-for</code>能够按你预想的顺序来遍历数据</p></li><li><h4 id="anguarjs"><a href="#anguarjs" class="headerlink" title="anguarjs"></a>anguarjs</h4><p><code>ng-repeat</code>: 一般会加上 <code>track by $index</code> 但是不像 <code>vue</code> 需要强制加上。</p></li></ul><h3 id="4、th-if-order-3"><a href="#4、th-if-order-3" class="headerlink" title="4、th:if order= 3"></a>4、<code>th:if</code> order= 3</h3><p>条件判断类似的还有<code>th:unless</code>，<code>th:swith</code>，<code>th:case</code></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">th:text</span>=<span class="string">"$&#123;thIf&#125;"</span> <span class="attr">th:if</span>=<span class="string">"$&#123;not #strings.isEmpty(thIf)&#125;"</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure><ul><li><h4 id="VUE-3"><a href="#VUE-3" class="headerlink" title="VUE"></a>VUE</h4><p><code>v-if</code>: 控制元素是否渲染，与v-show使用效果基本一样但是<code>v-show</code>只是 <code>display: none</code></p><p><code>v-else</code>:</p><p><code>v-elese-if</code>:</p></li><li><h4 id="angularjs-1"><a href="#angularjs-1" class="headerlink" title="angularjs"></a>angularjs</h4><p><code>ng-if</code>: 与vue使用方法效果一致</p><p><code>ng-else</code>:</p><p><code>ng-else-if</code>:</p></li></ul><h3 id="5、th-insert-order-1"><a href="#5、th-insert-order-1" class="headerlink" title="5、th:insert order= 1"></a>5、<code>th:insert</code> order= 1</h3><p>插入代码块，类似的还有<code>th:replace</code>,<code>th:include</code></p><p><code>th:insert</code>：将代码块片段整个插入到使用了th:insert的HTML标签中，</p><p><code>th:replace</code>：将代码块片段整个替换使用了th:replace的HTML标签中，</p><p><code>th:include</code>：将代码块片段包含的内容插入到使用了th:include的HTML标签中，</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">th:insert</span>=<span class="string">"~&#123;grammar/common::thCommon&#125;"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 使用th:fragment来创建代码块 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">footer</span> <span class="attr">th:fragment</span>=<span class="string">"copy"</span>&gt;</span></span><br><span class="line"><span class="symbol">&amp;copy;</span> 2019 The Good Thymes Virtual Grocery</span><br><span class="line"><span class="tag">&lt;/<span class="name">footer</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 代码块的使用 --&gt;</span></span><br><span class="line"><span class="comment">&lt;!--三种不同的引入方式--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">th:insert</span>=<span class="string">"footer :: copy"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">th:replace</span>=<span class="string">"footer :: copy"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">th:include</span>=<span class="string">"footer :: copy"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 三种方式最终呈现效果的区别 --&gt;</span></span><br><span class="line"><span class="comment">&lt;!--th:insert是在div中插入代码块，即多了一层div--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">footer</span>&gt;</span></span><br><span class="line">      <span class="symbol">&amp;copy;</span> 2019 The Good Thymes Virtual Grocery</span><br><span class="line">    <span class="tag">&lt;/<span class="name">footer</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!--th:replace是将代码块代替当前div，其html结构和之前一致--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">footer</span>&gt;</span></span><br><span class="line">  <span class="symbol">&amp;copy;</span> 2019 The Good Thymes Virtual Grocery</span><br><span class="line"><span class="tag">&lt;/<span class="name">footer</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!--th:include是将代码块footer的内容插入到div中，即少了一层footer--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="symbol">&amp;copy;</span> 2019 The Good Thymes Virtual Grocery</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 使用th:fragment方式定义的代码块可以使用三种方式引用，只是插入的效果不同 --&gt;</span></span><br></pre></td></tr></table></figure><ul><li><h4 id="VUE-4"><a href="#VUE-4" class="headerlink" title="VUE"></a>VUE</h4><p>在<code>vue</code>中，使用组件<code>template</code>的形式定义代码块，使用components注册后，可以直接在需要的地方把组件名当<code>html</code>标签放到需要的地方。</p></li><li><h4 id="angularjs-2"><a href="#angularjs-2" class="headerlink" title="angularjs"></a>angularjs</h4><p>使用自定义指令<code>directive</code>来定义代码块，共有AEC 三种形式的组件，直接当作标签，或注释，标签属性，来使用</p></li></ul><h3 id="6、th-fragment-order-8"><a href="#6、th-fragment-order-8" class="headerlink" title="6、th:fragment order= 8"></a>6、<code>th:fragment</code> order= 8</h3><p>定义代码块，方便被<code>th:insert</code>引用</p><ul><li><h4 id="VUE-5"><a href="#VUE-5" class="headerlink" title="VUE"></a>VUE</h4></li><li><h4 id="angularjs-3"><a href="#angularjs-3" class="headerlink" title="angularjs"></a>angularjs</h4></li></ul><h3 id="7、-th-object-order-4"><a href="#7、-th-object-order-4" class="headerlink" title="7、 th:object order= 4"></a>7、 <code>th:object</code> order= 4</h3><p>声明变量，一般与*{}一起使用</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">th:object</span>=<span class="string">"$&#123;thObject&#125;"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>ID: <span class="tag">&lt;<span class="name">span</span> <span class="attr">th:text</span>=<span class="string">"*&#123;id&#125;"</span> /&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span><span class="comment">&lt;!--th:text="$&#123;thObject.id&#125;"--&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>TH: <span class="tag">&lt;<span class="name">span</span> <span class="attr">th:text</span>=<span class="string">"*&#123;thName&#125;"</span> /&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span><span class="comment">&lt;!--$&#123;thObject.thName&#125;--&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>DE: <span class="tag">&lt;<span class="name">span</span> <span class="attr">th:text</span>=<span class="string">"*&#123;desc&#125;"</span> /&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span><span class="comment">&lt;!--$&#123;thObject.desc&#125;--&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><ul><li><h4 id="VUE-6"><a href="#VUE-6" class="headerlink" title="VUE"></a>VUE</h4><p><code>v-model</code>: //在js中必须先定义，否则无法使用</p><p><code>:</code>:</p></li><li><h4 id="angularjs-4"><a href="#angularjs-4" class="headerlink" title="angularjs"></a>angularjs</h4><p><code>ng-model</code>: //在angularjs中推荐在js中先定义，再绑定到html</p><p><code>ng-init</code>: //声明变量</p></li></ul><h3 id="8、th-attr"><a href="#8、th-attr" class="headerlink" title="8、th:attr"></a>8、<code>th:attr</code></h3><p>修改任意属性，很少使用</p><h3 id="9、java负责给前端传输变量"><a href="#9、java负责给前端传输变量" class="headerlink" title="9、java负责给前端传输变量"></a>9、<code>java</code>负责给前端传输变量</h3><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> com.itdragon.entities.ThObject;</span><br><span class="line"><span class="keyword">import</span> org.springframework.stereotype.Controller;</span><br><span class="line"><span class="keyword">import</span> org.springframework.ui.ModelMap;</span><br><span class="line"><span class="keyword">import</span> org.springframework.web.bind.annotation.RequestMapping;</span><br><span class="line"><span class="keyword">import</span> java.util.ArrayList;</span><br><span class="line"><span class="keyword">import</span> java.util.Arrays;</span><br><span class="line"><span class="keyword">import</span> java.util.List;</span><br><span class="line"></span><br><span class="line"><span class="meta">@Controller</span></span><br><span class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">ThymeleafController</span> </span>&#123;</span><br><span class="line"></span><br><span class="line">    <span class="meta">@RequestMapping</span>(<span class="string">"thymeleaf"</span>)</span><br><span class="line">    <span class="function"><span class="keyword">public</span> String <span class="title">thymeleaf</span><span class="params">(ModelMap map)</span> </span>&#123;</span><br><span class="line">        map.put(<span class="string">"thText"</span>, <span class="string">"th:text 设置文本内容 &lt;b&gt;加粗&lt;/b&gt;"</span>);</span><br><span class="line">        map.put(<span class="string">"thUText"</span>, <span class="string">"th:utext 设置文本内容 &lt;b&gt;加粗&lt;/b&gt;"</span>);</span><br><span class="line">        map.put(<span class="string">"thValue"</span>, <span class="string">"thValue 设置当前元素的value值"</span>);</span><br><span class="line">        map.put(<span class="string">"thEach"</span>, Arrays.asList(<span class="string">"th:each"</span>, <span class="string">"遍历列表"</span>));</span><br><span class="line">        map.put(<span class="string">"thIf"</span>, <span class="string">"msg is not null"</span>);</span><br><span class="line">        map.put(<span class="string">"thObject"</span>, <span class="keyword">new</span> ThObject(<span class="number">1L</span>, <span class="string">"th:object"</span>, <span class="string">"用来偷懒的th属性"</span>));</span><br><span class="line">        <span class="keyword">return</span> <span class="string">"grammar/thymeleaf"</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><hr><h2 id="二、标准表达式"><a href="#二、标准表达式" class="headerlink" title="二、标准表达式"></a>二、标准表达式</h2><h3 id="1、-变量表达式"><a href="#1、-变量表达式" class="headerlink" title="1、${} 变量表达式"></a>1、<code>${}</code> 变量表达式</h3><ul><li><h4 id="可以获取对象的属性和方法"><a href="#可以获取对象的属性和方法" class="headerlink" title="可以获取对象的属性和方法"></a>可以获取对象的属性和方法</h4></li><li><h4 id="可以使用"><a href="#可以使用" class="headerlink" title="可以使用"></a>可以使用</h4><ul><li><p><code>ctx</code>：上下文对象</p></li><li><p><code>vars</code>：上下文变量</p></li><li><p><code>locale</code>：上下文的语言环境</p></li><li><p><code>request</code>：（仅在web上下文)的HttpServletRequest对象</p></li><li><p><code>response</code>：（仅在web上下文）的HttpServletResponse对象</p></li><li><p><code>session</code>：（仅在web上下文）的session对象</p></li><li><p><code>servletContext</code>：（仅在web上下文）ServletContex 内置对象</p></li></ul></li></ul><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// java 代码将用户名放在session中</span></span><br><span class="line">session.setAttribute(<span class="string">"userinfo"</span>,username);</span><br></pre></td></tr></table></figure><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- Thymeleaf通过内置对象直接获取 --&gt;</span></span><br><span class="line">th:text="$&#123;session.userinfo&#125;"</span><br></pre></td></tr></table></figure><ul><li><h4 id="可以使用-1"><a href="#可以使用-1" class="headerlink" title="可以使用"></a>可以使用</h4><ul><li><p><code>dates</code>：日期方法，常用的方法有：format，year，month，hour，createNow等</p></li><li><p><code>numbers</code>：数据格式化方法，常用的方法有：formatDecimal</p></li><li><p><code>strings</code>：字符串格式化方法：在javaString对象有的方法他基本都有</p><ul><li>equals</li><li>equalslgnoreCase</li><li>length</li><li>trim</li><li>toUpperCase</li><li>toLowerCase</li><li>indexOf</li><li>substring</li><li>replace</li><li>startsWith</li><li>endsWith</li><li>contains</li><li>containslgnoreCase</li></ul></li><li><p><code>objects</code>：</p></li><li><p><code>arrays</code>：数组方法，常用的方法有：toArray，length，isEmpty，contains，containsAll等</p></li><li><p><code>lists</code>：集合方法，常用的方法有：toList，size，isEmpty，contains，containsAll，sort等</p></li><li><p><code>sets</code>：集合方法，常用的方法有：toList，size，isEmpty，contains，containsAll，sort等</p></li><li><p><code>maps</code>：对象方法，常用的方法有：size，isEmpty，containsKey，containsValue等</p></li></ul></li></ul><h3 id="使用实例"><a href="#使用实例" class="headerlink" title="使用实例"></a>使用实例</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span> <span class="attr">xmlns:th</span>=<span class="string">"http://www.thymeleaf.org"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>ITDragon Thymeleaf 内置方法<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h2</span>&gt;</span>ITDragon Thymeleaf 内置方法<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h3</span>&gt;</span>#strings <span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">th:if</span>=<span class="string">"$&#123;not #strings.isEmpty(itdragonStr)&#125;"</span> &gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>Old Str : <span class="tag">&lt;<span class="name">span</span> <span class="attr">th:text</span>=<span class="string">"$&#123;itdragonStr&#125;"</span>/&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>toUpperCase : <span class="tag">&lt;<span class="name">span</span> <span class="attr">th:text</span>=<span class="string">"$&#123;#strings.toUpperCase(itdragonStr)&#125;"</span>/&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>toLowerCase : <span class="tag">&lt;<span class="name">span</span> <span class="attr">th:text</span>=<span class="string">"$&#123;#strings.toLowerCase(itdragonStr)&#125;"</span>/&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>equals : <span class="tag">&lt;<span class="name">span</span> <span class="attr">th:text</span>=<span class="string">"$&#123;#strings.equals(itdragonStr, 'itdragonblog')&#125;"</span>/&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>equalsIgnoreCase : <span class="tag">&lt;<span class="name">span</span> <span class="attr">th:text</span>=<span class="string">"$&#123;#strings.equalsIgnoreCase(itdragonStr, 'itdragonblog')&#125;"</span>/&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>indexOf : <span class="tag">&lt;<span class="name">span</span> <span class="attr">th:text</span>=<span class="string">"$&#123;#strings.indexOf(itdragonStr, 'r')&#125;"</span>/&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>substring : <span class="tag">&lt;<span class="name">span</span> <span class="attr">th:text</span>=<span class="string">"$&#123;#strings.substring(itdragonStr, 2, 8)&#125;"</span>/&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>replace : <span class="tag">&lt;<span class="name">span</span> <span class="attr">th:text</span>=<span class="string">"$&#123;#strings.replace(itdragonStr, 'it', 'IT')&#125;"</span>/&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>startsWith : <span class="tag">&lt;<span class="name">span</span> <span class="attr">th:text</span>=<span class="string">"$&#123;#strings.startsWith(itdragonStr, 'it')&#125;"</span>/&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>contains : <span class="tag">&lt;<span class="name">span</span> <span class="attr">th:text</span>=<span class="string">"$&#123;#strings.contains(itdragonStr, 'IT')&#125;"</span>/&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">h3</span>&gt;</span>#numbers <span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>formatDecimal 整数部分随意，小数点后保留两位，四舍五入: <span class="tag">&lt;<span class="name">span</span> <span class="attr">th:text</span>=<span class="string">"$&#123;#numbers.formatDecimal(itdragonNum, 0, 2)&#125;"</span>/&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>formatDecimal 整数部分保留五位数，小数点后保留两位，四舍五入: <span class="tag">&lt;<span class="name">span</span> <span class="attr">th:text</span>=<span class="string">"$&#123;#numbers.formatDecimal(itdragonNum, 5, 2)&#125;"</span>/&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">h3</span>&gt;</span>#bools <span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">th:if</span>=<span class="string">"$&#123;#bools.isTrue(itdragonBool)&#125;"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span> <span class="attr">th:text</span>=<span class="string">"$&#123;itdragonBool&#125;"</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">h3</span>&gt;</span>#arrays <span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">th:if</span>=<span class="string">"$&#123;not #arrays.isEmpty(itdragonArray)&#125;"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>length : <span class="tag">&lt;<span class="name">span</span> <span class="attr">th:text</span>=<span class="string">"$&#123;#arrays.length(itdragonArray)&#125;"</span>/&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>contains : <span class="tag">&lt;<span class="name">span</span> <span class="attr">th:text</span>=<span class="string">"$&#123;#arrays.contains(itdragonArray, 5)&#125;"</span>/&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>containsAll : <span class="tag">&lt;<span class="name">span</span> <span class="attr">th:text</span>=<span class="string">"$&#123;#arrays.containsAll(itdragonArray, itdragonArray)&#125;"</span>/&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h3</span>&gt;</span>#lists <span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">th:if</span>=<span class="string">"$&#123;not #lists.isEmpty(itdragonList)&#125;"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>size : <span class="tag">&lt;<span class="name">span</span> <span class="attr">th:text</span>=<span class="string">"$&#123;#lists.size(itdragonList)&#125;"</span>/&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>contains : <span class="tag">&lt;<span class="name">span</span> <span class="attr">th:text</span>=<span class="string">"$&#123;#lists.contains(itdragonList, 0)&#125;"</span>/&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>sort : <span class="tag">&lt;<span class="name">span</span> <span class="attr">th:text</span>=<span class="string">"$&#123;#lists.sort(itdragonList)&#125;"</span>/&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h3</span>&gt;</span>#maps <span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">th:if</span>=<span class="string">"$&#123;not #maps.isEmpty(itdragonMap)&#125;"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>size : <span class="tag">&lt;<span class="name">span</span> <span class="attr">th:text</span>=<span class="string">"$&#123;#maps.size(itdragonMap)&#125;"</span>/&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>containsKey : <span class="tag">&lt;<span class="name">span</span> <span class="attr">th:text</span>=<span class="string">"$&#123;#maps.containsKey(itdragonMap, 'thName')&#125;"</span>/&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>containsValue : <span class="tag">&lt;<span class="name">span</span> <span class="attr">th:text</span>=<span class="string">"$&#123;#maps.containsValue(itdragonMap, '#maps')&#125;"</span>/&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h3</span>&gt;</span>#dates <span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>format : <span class="tag">&lt;<span class="name">span</span> <span class="attr">th:text</span>=<span class="string">"$&#123;#dates.format(itdragonDate)&#125;"</span>/&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>custom format : <span class="tag">&lt;<span class="name">span</span> <span class="attr">th:text</span>=<span class="string">"$&#123;#dates.format(itdragonDate, 'yyyy-MM-dd HH:mm:ss')&#125;"</span>/&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>day : <span class="tag">&lt;<span class="name">span</span> <span class="attr">th:text</span>=<span class="string">"$&#123;#dates.day(itdragonDate)&#125;"</span>/&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>month : <span class="tag">&lt;<span class="name">span</span> <span class="attr">th:text</span>=<span class="string">"$&#123;#dates.month(itdragonDate)&#125;"</span>/&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>monthName : <span class="tag">&lt;<span class="name">span</span> <span class="attr">th:text</span>=<span class="string">"$&#123;#dates.monthName(itdragonDate)&#125;"</span>/&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>year : <span class="tag">&lt;<span class="name">span</span> <span class="attr">th:text</span>=<span class="string">"$&#123;#dates.year(itdragonDate)&#125;"</span>/&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>dayOfWeekName : <span class="tag">&lt;<span class="name">span</span> <span class="attr">th:text</span>=<span class="string">"$&#123;#dates.dayOfWeekName(itdragonDate)&#125;"</span>/&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>hour : <span class="tag">&lt;<span class="name">span</span> <span class="attr">th:text</span>=<span class="string">"$&#123;#dates.hour(itdragonDate)&#125;"</span>/&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>minute : <span class="tag">&lt;<span class="name">span</span> <span class="attr">th:text</span>=<span class="string">"$&#123;#dates.minute(itdragonDate)&#125;"</span>/&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>second : <span class="tag">&lt;<span class="name">span</span> <span class="attr">th:text</span>=<span class="string">"$&#123;#dates.second(itdragonDate)&#125;"</span>/&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>createNow : <span class="tag">&lt;<span class="name">span</span> <span class="attr">th:text</span>=<span class="string">"$&#123;#dates.createNow()&#125;"</span>/&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure><h4 id="后台代码"><a href="#后台代码" class="headerlink" title="后台代码"></a>后台代码</h4><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">@RequestMapping</span>(<span class="string">"varexpressions"</span>)</span><br><span class="line"><span class="function"><span class="keyword">public</span> String <span class="title">varexpressions</span><span class="params">(ModelMap map)</span> </span>&#123;</span><br><span class="line">  map.put(<span class="string">"itdragonStr"</span>, <span class="string">"itdragonBlog"</span>);</span><br><span class="line">  map.put(<span class="string">"itdragonBool"</span>, <span class="keyword">true</span>);</span><br><span class="line">  map.put(<span class="string">"itdragonArray"</span>, <span class="keyword">new</span> Integer[]&#123;<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>&#125;);</span><br><span class="line">  map.put(<span class="string">"itdragonList"</span>, Arrays.asList(<span class="number">1</span>,<span class="number">3</span>,<span class="number">2</span>,<span class="number">4</span>,<span class="number">0</span>));</span><br><span class="line">  Map itdragonMap = <span class="keyword">new</span> HashMap();</span><br><span class="line">  itdragonMap.put(<span class="string">"thName"</span>, <span class="string">"$&#123;#...&#125;"</span>);</span><br><span class="line">  itdragonMap.put(<span class="string">"desc"</span>, <span class="string">"变量表达式内置方法"</span>);</span><br><span class="line">  map.put(<span class="string">"itdragonMap"</span>, itdragonMap);</span><br><span class="line">  map.put(<span class="string">"itdragonDate"</span>, <span class="keyword">new</span> Date());</span><br><span class="line">  map.put(<span class="string">"itdragonNum"</span>, <span class="number">888.888</span>D);</span><br><span class="line">  <span class="keyword">return</span> <span class="string">"grammar/varexpressions"</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h3 id="2、-链接表达式"><a href="#2、-链接表达式" class="headerlink" title="2、@{} 链接表达式"></a>2、<code>@{}</code> 链接表达式</h3><p>无论时静态资源的引用，form表单的请求，凡是链接都可以用<code>@{}</code>。这样可以动态控制项目路径，即便项目路径目录变了，依然可以正常访问</p><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">server.context-path=/xxx</span><br></pre></td></tr></table></figure><p>链接表达式结构</p><p>无参：<code>@{xxx}</code>,有参：<code>@{/xxx{k=v1,k2=v2}}</code></p><p>对应的URL结构：<code>@{xxx?k=v1&amp;k2=v2}</code></p><p>引入本地资源：<code>@{/项目本地的路径资源}</code></p><p>引入外部资源：<code>@{/webjars/资源在jar包中的路径}</code></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">link</span> <span class="attr">th:href</span>=<span class="string">"@&#123;/webjars/bootstrap/4.0.0/css/bootstrap.css&#125;"</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">link</span> <span class="attr">th:href</span>=<span class="string">"@&#123;/main/css/itdragon.css&#125;"</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">form</span> <span class="attr">class</span>=<span class="string">"form-login"</span> <span class="attr">th:action</span>=<span class="string">"@&#123;/user/login&#125;"</span> <span class="attr">th:method</span>=<span class="string">"post"</span> &gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">class</span>=<span class="string">"btn btn-sm"</span> <span class="attr">th:href</span>=<span class="string">"@&#123;/login.html(l='zh_CN')&#125;"</span>&gt;</span>中文<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">class</span>=<span class="string">"btn btn-sm"</span> <span class="attr">th:href</span>=<span class="string">"@&#123;/login.html(l='en_US')&#125;"</span>&gt;</span>English<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br></pre></td></tr></table></figure><h3 id="3、-消息表达式"><a href="#3、-消息表达式" class="headerlink" title="3、#{} 消息表达式"></a>3、<code>#{}</code> 消息表达式</h3><p>消息表达式一般用于国际化的场景<code>th:text=&quot;#{msg}&quot;</code>。</p><h3 id="4、-代码块表达式"><a href="#4、-代码块表达式" class="headerlink" title="4、~{} 代码块表达式"></a>4、<code>~{}</code> 代码块表达式</h3><p>支持两种语法结构</p><p>推荐：<code>~{templatename::fragmentname}</code></p><p>支持：<code>~{templatename::#id}</code></p><h3 id="5、-选择变量表达式"><a href="#5、-选择变量表达式" class="headerlink" title="5、*{} 选择变量表达式"></a>5、<code>*{}</code> 选择变量表达式</h3><p>多用于和th:object结合使用</p><h3 id="Thymeleaf在SpringBoot应用"><a href="#Thymeleaf在SpringBoot应用" class="headerlink" title="Thymeleaf在SpringBoot应用"></a><code>Thymeleaf</code>在<code>SpringBoot</code>应用</h3><p><code>Thymeleaf</code>是<code>Spring Boot</code>官方推荐使用的模版引擎，这也意味着用<code>Thymeleaf</code>比其他模版引擎更简单。</p><p>开发步骤：</p><h4 id="第一步：引入Thymeleaf依赖"><a href="#第一步：引入Thymeleaf依赖" class="headerlink" title="第一步：引入Thymeleaf依赖"></a>第一步：引入<code>Thymeleaf</code>依赖</h4><h4 id="第二步：提取公共页面，提高代码的重用性，统一页面风格"><a href="#第二步：提取公共页面，提高代码的重用性，统一页面风格" class="headerlink" title="第二步：提取公共页面，提高代码的重用性，统一页面风格"></a>第二步：提取公共页面，提高代码的重用性，统一页面风格</h4><h4 id="第三步：页面显示和国际化功能"><a href="#第三步：页面显示和国际化功能" class="headerlink" title="第三步：页面显示和国际化功能"></a>第三步：页面显示和国际化功能</h4><p>引入<code>Thymeleaf</code>，<code>pom.xml</code> 引入<code>Thymeleaf</code>的依赖，并确定其版本</p><figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">properties</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">project.build.sourceEncoding</span>&gt;</span>UTF-8<span class="tag">&lt;/<span class="name">project.build.sourceEncoding</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">project.reporting.outputEncoding</span>&gt;</span>UTF-8<span class="tag">&lt;/<span class="name">project.reporting.outputEncoding</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">java.version</span>&gt;</span>1.8<span class="tag">&lt;/<span class="name">java.version</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">thymeleaf.version</span>&gt;</span>3.0.9.RELEASE<span class="tag">&lt;/<span class="name">thymeleaf.version</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">thymeleaf-layout-dialect.version</span>&gt;</span>2.2.2<span class="tag">&lt;/<span class="name">thymeleaf-layout-dialect.version</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">properties</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">dependencies</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">dependency</span>&gt;</span> <span class="comment">&lt;!--引入模版引擎thymeleaf--&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">groupId</span>&gt;</span>org.springframework.boot<span class="tag">&lt;/<span class="name">groupId</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">artifactId</span>&gt;</span>spring-boot-starter-thymeleaf<span class="tag">&lt;/<span class="name">artifactId</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">dependency</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">dependencies</span>&gt;</span></span><br></pre></td></tr></table></figure><h4 id="提取公共页面"><a href="#提取公共页面" class="headerlink" title="提取公共页面"></a>提取公共页面</h4><p>为了统一页面风格，提高页面的复用率，我们一般都会提取公共页面。之前在文章中介绍了<code>SiteMesh</code>的使用，今天用<code>Thymeleaf</code>来实现。</p><h4 id="统一规范引入的资源文件"><a href="#统一规范引入的资源文件" class="headerlink" title="统一规范引入的资源文件"></a>统一规范引入的资源文件</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span> <span class="attr">xmlns:th</span>=<span class="string">"http://www.thymeleaf.org"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">head</span> <span class="attr">th:fragment</span>=<span class="string">"common-head"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"Content-Type"</span> <span class="attr">content</span>=<span class="string">"text/html; charset=UTF-8"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"initial-scale=1.0, width=device-width, user-scalable=no"</span> /&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">title</span>&gt;</span>ITDragon系统<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">link</span> <span class="attr">type</span>=<span class="string">"image/x-icon"</span> <span class="attr">href</span>=<span class="string">"images/favicon.ico"</span> <span class="attr">rel</span>=<span class="string">"shortcut icon"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">link</span> <span class="attr">th:href</span>=<span class="string">"@&#123;/sb-admin-1.0.4/css/bootstrap.min.css&#125;"</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">link</span> <span class="attr">th:href</span>=<span class="string">"@&#123;/sb-admin-1.0.4/css/sb-admin.css&#125;"</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">link</span> <span class="attr">th:href</span>=<span class="string">"@&#123;/sb-admin-1.0.4/css/plugins/morris.css&#125;"</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">link</span> <span class="attr">th:href</span>=<span class="string">"@&#123;/sb-admin-1.0.4/font-awesome/css/font-awesome.min.css&#125;"</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">script</span> <span class="attr">th:src</span>=<span class="string">"@&#123;/sb-admin-1.0.4/js/jquery.js&#125;"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">script</span> <span class="attr">th:src</span>=<span class="string">"@&#123;/sb-admin-1.0.4/js/bootstrap.min.js&#125;"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">script</span> <span class="attr">th:src</span>=<span class="string">"@&#123;/sb-admin-1.0.4/js/plugins/morris/raphael.min.js&#125;"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">script</span> <span class="attr">th:src</span>=<span class="string">"@&#123;/sb-admin-1.0.4/js/plugins/morris/morris.min.js&#125;"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">script</span> <span class="attr">th:src</span>=<span class="string">"@&#123;/sb-admin-1.0.4/js/plugins/morris/morris-data.js&#125;"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure><p>统一左侧菜单栏</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span> <span class="attr">xmlns:th</span>=<span class="string">"http://www.thymeleaf.org"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">header</span> <span class="attr">id</span>=<span class="string">"header"</span> <span class="attr">th:fragment</span>=<span class="string">"common-header"</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- Navigation --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">nav</span> <span class="attr">class</span>=<span class="string">"navbar navbar-inverse navbar-fixed-top"</span> <span class="attr">role</span>=<span class="string">"navigation"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"navbar-header"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">button</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">class</span>=<span class="string">"navbar-toggle"</span> <span class="attr">data-toggle</span>=<span class="string">"collapse"</span> <span class="attr">data-target</span>=<span class="string">".navbar-ex1-collapse"</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"sr-only"</span>&gt;</span>Toggle navigation<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"icon-bar"</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"icon-bar"</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"icon-bar"</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">a</span> <span class="attr">class</span>=<span class="string">"navbar-brand"</span> <span class="attr">href</span>=<span class="string">"/dashboard"</span>&gt;</span>ITDragon sb-admin-1.0.4<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="comment">&lt;!--和知识点没关系的代码，这里就补贴出来了，完整代码请异步github--&gt;</span></span><br><span class="line">        <span class="comment">&lt;!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"collapse navbar-collapse navbar-ex1-collapse"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">ul</span> <span class="attr">class</span>=<span class="string">"nav navbar-nav side-nav itdragon-nav"</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">li</span> <span class="attr">th:class</span>=<span class="string">"$&#123;activeUrl=='dashboard'?'nav-link active':'nav-link'&#125;"</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">a</span> <span class="attr">th:href</span>=<span class="string">"@&#123;/dashboard&#125;"</span>&gt;</span><span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-fw fa-dashboard"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span> Dashboard<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">li</span> <span class="attr">th:class</span>=<span class="string">"$&#123;activeUrl=='employees'?'nav-link active':'nav-link'&#125;"</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">a</span> <span class="attr">th:href</span>=<span class="string">"@&#123;/employees&#125;"</span>&gt;</span><span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-fw fa-bar-chart-o"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span> Employees<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="comment">&lt;!-- /.navbar-collapse --&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">nav</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">header</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure></div><ul class="post-copyright"><li><strong>本文标题：</strong><a href="https://wxperia.com/2019/09/02/thymeleaf3基本语法/">【老掉牙】thymeleaft3 基本语法</a></li><li><strong>本文作者：</strong><a href="https://wxperia.com">XieZiqian</a></li><li><strong>本文链接：</strong><a href="https://wxperia.com/2019/09/02/thymeleaf3基本语法/">https://wxperia.com/2019/09/02/thymeleaf3基本语法/</a></li><li><strong>版权声明：</strong><span>本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" rel="external nofollow" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明出处！</span></li></ul><div></div><link rel="stylesheet" href="https://cdnjs.loli.net/ajax/libs/social-share.js/1.0.16/css/share.min.css"><div class="social-share"></div><script src="https://cdnjs.loli.net/ajax/libs/social-share.js/1.0.16/js/social-share.min.js"></script></article></div><div class="card"><div class="card-content"><h3 class="menu-label has-text-centered">喜欢这篇文章？打赏一下作者吧</h3><div class="buttons is-centered"><a class="button is-info donate"><span class="icon is-small"><i class="fab fa-alipay"></i></span><span>支付宝</span><span class="qrcode"><img src="https://blog-status.oss-cn-beijing.aliyuncs.com/blog/img849998cac1f116ac6f159a30bc6fe19.jpg" alt="支付宝"></span></a><a class="button is-success donate"><span class="icon is-small"><i class="fab fa-weixin"></i></span><span>微信</span><span class="qrcode"><img src="https://blog-status.oss-cn-beijing.aliyuncs.com/blog/img4d5123c31bee4d8a0272762b0c8238a.jpg" alt="微信"></span></a></div></div></div><nav class="post-navigation mt-4 level is-mobile"><div class="level-start"><a class="article-nav-prev level level-item link-muted" href="/2019/09/04/office2010%E7%A0%B4%E8%A7%A3/"><i class="level-item fas fa-chevron-left"></i><span class="level-item">【破解】office2010破解</span></a></div><div class="level-end"><a class="article-nav-next level level-item link-muted" href="/2019/08/31/hexo%20%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2%20github%20%E6%89%98%E7%AE%A1%20%E7%BB%91%E5%AE%9A%E5%9F%9F%E5%90%8D/"><span class="level-item">【hexo】hexo 搭建博客 托管在github</span><i class="level-item fas fa-chevron-right"></i></a></div></nav><div class="card"><div class="card-content"><div class="title is-5">评论</div><div id="comment-container"></div><link rel="stylesheet" href="https://cdnjs.loli.net/ajax/libs/gitalk/1.6.0/gitalk.css"><script>$.getScript("https://cdn.jsdelivr.net/gh/wxperia/wxperia.github.io@latest//js/gitalk.min.js",function(){new Gitalk({language:"zh-CN",id:"24b6ec61d1a2b65e583a0d07ce9c63b4",repo:"Wxperia.github.io",owner:"Wxperia",clientID:"52c5fa5cd6ab2aba4c38",clientSecret:"c153bf2fcf5d1e3784fcb161c2ca5702ca3bcaee",admin:["Wxperia"],createIssueManually:!0,distractionFreeMode:!1,perPage:10,pagerDirection:"last",enableHotKey:!0,isLocked:!1}).render("comment-container")})</script></div></div></div><div class="column column-left is-4-tablet is-4-desktop is-4-widescreen order-1 is-sticky"><div class="card widget toc-scroll" id="toc"><div class="card-content"><div class="menu"><h3 class="menu-label">目录</h3><ul class="menu-list toc"><li><a class="is-flex toc-item" id="toc-item-常用属性介绍" href="#常用属性介绍"><span>常用属性介绍</span></a><ul class="menu-list toc"><li><a class="is-flex toc-item" id="toc-item-1、-th-text-order-7" href="#1、-th-text-order-7"><span>1、 th:text order&amp;#x3D; 7</span></a><ul class="menu-list toc"><li><a class="is-flex toc-item" id="toc-item-VUE" href="#VUE"><span>VUE</span></a></li><li><a class="is-flex toc-item" id="toc-item-angularjs" href="#angularjs"><span>angularjs</span></a></li></ul></li><li><a class="is-flex toc-item" id="toc-item-2、th-value-order-6" href="#2、th-value-order-6"><span>2、th:value order&amp;#x3D; 6</span></a><ul class="menu-list toc"><li><a class="is-flex toc-item" id="toc-item-VUE-1" href="#VUE-1"><span>VUE</span></a></li><li><a class="is-flex toc-item" id="toc-item-angualrjs" href="#angualrjs"><span>angualrjs</span></a></li></ul></li><li><a class="is-flex toc-item" id="toc-item-3、th-each-order-2" href="#3、th-each-order-2"><span>3、th:each order&amp;#x3D; 2</span></a><ul class="menu-list toc"><li><a class="is-flex toc-item" id="toc-item-VUE-2" href="#VUE-2"><span>VUE</span></a></li><li><a class="is-flex toc-item" id="toc-item-anguarjs" href="#anguarjs"><span>anguarjs</span></a></li></ul></li><li><a class="is-flex toc-item" id="toc-item-4、th-if-order-3" href="#4、th-if-order-3"><span>4、th:if order&amp;#x3D; 3</span></a><ul class="menu-list toc"><li><a class="is-flex toc-item" id="toc-item-VUE-3" href="#VUE-3"><span>VUE</span></a></li><li><a class="is-flex toc-item" id="toc-item-angularjs-1" href="#angularjs-1"><span>angularjs</span></a></li></ul></li><li><a class="is-flex toc-item" id="toc-item-5、th-insert-order-1" href="#5、th-insert-order-1"><span>5、th:insert order&amp;#x3D; 1</span></a><ul class="menu-list toc"><li><a class="is-flex toc-item" id="toc-item-VUE-4" href="#VUE-4"><span>VUE</span></a></li><li><a class="is-flex toc-item" id="toc-item-angularjs-2" href="#angularjs-2"><span>angularjs</span></a></li></ul></li><li><a class="is-flex toc-item" id="toc-item-6、th-fragment-order-8" href="#6、th-fragment-order-8"><span>6、th:fragment order&amp;#x3D; 8</span></a><ul class="menu-list toc"><li><a class="is-flex toc-item" id="toc-item-VUE-5" href="#VUE-5"><span>VUE</span></a></li><li><a class="is-flex toc-item" id="toc-item-angularjs-3" href="#angularjs-3"><span>angularjs</span></a></li></ul></li><li><a class="is-flex toc-item" id="toc-item-7、-th-object-order-4" href="#7、-th-object-order-4"><span>7、 th:object order&amp;#x3D; 4</span></a><ul class="menu-list toc"><li><a class="is-flex toc-item" id="toc-item-VUE-6" href="#VUE-6"><span>VUE</span></a></li><li><a class="is-flex toc-item" id="toc-item-angularjs-4" href="#angularjs-4"><span>angularjs</span></a></li></ul></li><li><a class="is-flex toc-item" id="toc-item-8、th-attr" href="#8、th-attr"><span>8、th:attr</span></a></li><li><a class="is-flex toc-item" id="toc-item-9、java负责给前端传输变量" href="#9、java负责给前端传输变量"><span>9、java负责给前端传输变量</span></a></li></ul></li><li><a class="is-flex toc-item" id="toc-item-二、标准表达式" href="#二、标准表达式"><span>二、标准表达式</span></a><ul class="menu-list toc"><li><a class="is-flex toc-item" id="toc-item-1、-变量表达式" href="#1、-变量表达式"><span>1、${} 变量表达式</span></a><ul class="menu-list toc"><li><a class="is-flex toc-item" id="toc-item-可以获取对象的属性和方法" href="#可以获取对象的属性和方法"><span>可以获取对象的属性和方法</span></a></li><li><a class="is-flex toc-item" id="toc-item-可以使用" href="#可以使用"><span>可以使用</span></a></li><li><a class="is-flex toc-item" id="toc-item-可以使用-1" href="#可以使用-1"><span>可以使用</span></a></li></ul></li><li><a class="is-flex toc-item" id="toc-item-使用实例" href="#使用实例"><span>使用实例</span></a><ul class="menu-list toc"><li><a class="is-flex toc-item" id="toc-item-后台代码" href="#后台代码"><span>后台代码</span></a></li></ul></li><li><a class="is-flex toc-item" id="toc-item-2、-链接表达式" href="#2、-链接表达式"><span>2、@{} 链接表达式</span></a></li><li><a class="is-flex toc-item" id="toc-item-3、-消息表达式" href="#3、-消息表达式"><span>3、#{} 消息表达式</span></a></li><li><a class="is-flex toc-item" id="toc-item-4、-代码块表达式" href="#4、-代码块表达式"><span>4、~{} 代码块表达式</span></a></li><li><a class="is-flex toc-item" id="toc-item-5、-选择变量表达式" href="#5、-选择变量表达式"><span>5、*{} 选择变量表达式</span></a></li><li><a class="is-flex toc-item" id="toc-item-Thymeleaf在SpringBoot应用" href="#Thymeleaf在SpringBoot应用"><span>Thymeleaf在SpringBoot应用</span></a><ul class="menu-list toc"><li><a class="is-flex toc-item" id="toc-item-第一步：引入Thymeleaf依赖" href="#第一步：引入Thymeleaf依赖"><span>第一步：引入Thymeleaf依赖</span></a></li><li><a class="is-flex toc-item" id="toc-item-第二步：提取公共页面，提高代码的重用性，统一页面风格" href="#第二步：提取公共页面，提高代码的重用性，统一页面风格"><span>第二步：提取公共页面，提高代码的重用性，统一页面风格</span></a></li><li><a class="is-flex toc-item" id="toc-item-第三步：页面显示和国际化功能" href="#第三步：页面显示和国际化功能"><span>第三步：页面显示和国际化功能</span></a></li><li><a class="is-flex toc-item" id="toc-item-提取公共页面" href="#提取公共页面"><span>提取公共页面</span></a></li><li><a class="is-flex toc-item" id="toc-item-统一规范引入的资源文件" href="#统一规范引入的资源文件"><span>统一规范引入的资源文件</span></a></li></ul></li></ul></li></ul></div></div><script type="text/javascript" async>$(document).ready(function () { //参考自 https://github.com/ppoffice/hexo-theme-icarus/pull/616/files
            var observerTopMargin;
            var scrollObserver;
            var headerElems = $(".headerlink");
            var activeTocItem;
        
            function initIntersectionObserver(docHeight) {
                observerTopMargin = docHeight;
                scrollObserver = new IntersectionObserver(scrollCallBack,
                    {
                        root: null,  // viewpoint
                        rootMargin: docHeight + "px 0px -80% 0px"  // cover top 30% of viewport to the top of document
                    })
            }
        
            function scrollCallBack(entries, observer) {
                if ($(window).scrollTop() > observerTopMargin * 0.7) { 
                    // User somehow scroll to 70% of observerTopMargin (which is inited as 200% document height)
                    // Observer top margin need to extend to cover all the space to the top of the document
                    initIntersectionObserver(observerTopMargin * 2)
                    observer.disconnect();
                    return;
                }
                let toActive;
                if (entries[0].intersectionRatio == 1) {  // enter viewed area
                    let entry = entries.reduce((u, v) => (u.target.toc_id > v.target.toc_id ? u : v));  // get the lowest item
                    toActive = $("#toc-item-" + $(entry.target).attr("href").substr(1));
                } else {
                    let entry = entries.reduce((u, v) => (u.target.toc_id < v.target.toc_id ? u : v));  // get the highest item
                    let idx = Math.max(entry.target.toc_id - 1, 0);
                    toActive = $("#toc-item-" + $(headerElems[idx]).attr("href").substr(1));
                }
                if (activeTocItem) activeTocItem.removeClass("is-current");
                activeTocItem = toActive
                activeTocItem.addClass("is-current");
            }
        
            initIntersectionObserver($(document).height() * 2);
            headerElems.each(function (index, obj) {
                obj.toc_id = index;
                scrollObserver.observe(obj);
            })
        });</script></div><div class="card widget"><div class="card-content"><nav class="level"><div class="level-item has-text-centered flex-shrink-1"><div><figure class="image is-128x128 mx-auto mb-2"><img class="is-rounded" src="https://blog-status.oss-cn-beijing.aliyuncs.com/blog/img20200303171412.png" alt="Wxperia🚀"></figure><p class="title is-size-4 is-block line-height-inherit">Wxperia🚀</p><p class="is-size-6 is-block">江湖中迷走</p><p class="is-size-6 is-flex justify-content-center"><i class="fas fa-map-marker-alt mr-1"></i><span>广州🍵</span></p></div></div></nav><nav class="level is-mobile"><div class="level-item has-text-centered is-marginless"><div><p class="heading">文章</p><a href="/archives"><p class="title">46</p></a></div></div><div class="level-item has-text-centered is-marginless"><div><p class="heading">分类</p><a href="/categories"><p class="title">24</p></a></div></div><div class="level-item has-text-centered is-marginless"><div><p class="heading">标签</p><a href="/tags"><p class="title">35</p></a></div></div></nav><div class="level"><a class="level-item button is-primary is-rounded" href="/" target="_blank" rel="noopener">关注我</a></div><div class="level is-mobile"><a class="level-item button is-transparent is-white is-marginless" target="_blank" rel="noopener" title="Github" href="https://github.com/Wxperia"><i class="fab fa-github"></i></a><a class="level-item button is-transparent is-white is-marginless" target="_blank" rel="noopener" title="Weibo" href="https://weibo.com/u/3050419984"><i class="fab fa-weibo"></i></a><a class="level-item button is-transparent is-white is-marginless" target="_blank" rel="noopener" title="Email" href="/914827352@qq.com"><i class="fa fa-envelope"></i></a></div><div><hr><p id="hitokoto">:D 一言句子获取中...</p><script type="text/javascript" defer>function getYiyan(){$.getJSON("https://v1.hitokoto.cn/",function(o){o&&($("#hitokoto").html(""),$("#hitokoto").append("<strong style='color: #3273dc;'>"+o.hitokoto+"</strong><p>来源《"+o.from+"》</p><p>提供者-"+o.creator+"</p>"))})}$(function(){getYiyan(),$("#hitokoto").click(function(){getYiyan()})})</script></div></div></div><div class="card widget"><div class="card-content"><h3 class="menu-label">最新文章</h3><article class="media"><div class="media-content size-small"><p><time datetime="2020-12-29T06:41:57.000Z">2020-12-29</time></p><p class="title is-6"><a class="link-muted" href="/2020/12/29/%E3%80%90vue%E3%80%91%E8%A7%A3%E8%80%A6%E6%A8%A1%E5%9D%97%E4%B9%8B%E9%97%B4%E7%9A%84%E8%AF%AD%E8%A8%80%E6%96%87%E4%BB%B6/">【vue】解耦模块之间的语言文件</a></p><p class="is-uppercase"></p></div></article><article class="media"><div class="media-content size-small"><p><time datetime="2020-12-28T01:46:47.000Z">2020-12-28</time></p><p class="title is-6"><a class="link-muted" href="/2020/12/28/%E3%80%90vue%E3%80%91%E6%97%A0%E7%BC%9Dtoken%E5%88%B7%E6%96%B0/">【vue】无缝token刷新</a></p><p class="is-uppercase"><i class="fas fa-folder-open has-text-grey"> </i><a class="link-muted" href="/categories/axios-token-refresh-token/">axios token refresh token</a></p></div></article><article class="media"><div class="media-content size-small"><p><time datetime="2020-12-24T15:56:05.000Z">2020-12-24</time></p><p class="title is-6"><a class="link-muted" href="/2020/12/24/HTML%E7%90%86%E8%AE%BA%E7%9F%A5%E8%AF%86/">HTML理论知识</a></p><p class="is-uppercase"></p></div></article><article class="media"><div class="media-content size-small"><p><time datetime="2020-11-21T15:32:53.000Z">2020-11-21</time></p><p class="title is-6"><a class="link-muted" href="/2020/11/21/%E7%8A%80%E7%9A%AE%E6%BC%86%E5%99%A8%E7%9A%84%E4%B8%80%E8%88%AC%E5%88%B6%E4%BD%9C%E6%AD%A5%E9%AA%A4/">【花活】犀皮漆器的一般制作步骤</a></p><p class="is-uppercase"><i class="fas fa-folder-open has-text-grey"> </i><a class="link-muted" href="/categories/%E6%BC%86%E5%99%A8/">漆器</a></p></div></article><article class="media"><div class="media-content size-small"><p><time datetime="2020-11-01T04:08:22.000Z">2020-11-01</time></p><p class="title is-6"><a class="link-muted" href="/2020/11/01/%E3%80%90%E5%89%8D%E7%AB%AF%E3%80%91vue%E5%8A%A8%E6%80%81%E8%B7%AF%E7%94%B1%E5%AE%9E%E7%8E%B0-1/">【前端】vue权限管理</a></p><p class="is-uppercase"></p></div></article></div></div><div class="card widget"><div class="card-content"><div class="menu"><h3 class="menu-label">分类</h3><ul class="menu-list"><li><a class="level is-mobile is-marginless" href="/categories/Linux/"><span class="level-start"><span class="level-item">Linux</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile is-marginless" href="/categories/Tools/"><span class="level-start"><span class="level-item">Tools</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile is-marginless" href="/categories/Typescript/"><span class="level-start"><span class="level-item">Typescript</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile is-marginless" href="/categories/Vue/"><span class="level-start"><span class="level-item">Vue</span></span><span class="level-end"><span class="level-item tag">2</span></span></a></li><li><a class="level is-mobile is-marginless" href="/categories/axios-token-refresh-token/"><span class="level-start"><span class="level-item">axios token refresh token</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile is-marginless" href="/categories/css/"><span class="level-start"><span class="level-item">css</span></span><span class="level-end"><span class="level-item tag">2</span></span></a></li><li><a class="level is-mobile is-marginless" href="/categories/docker/"><span class="level-start"><span class="level-item">docker</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile is-marginless" href="/categories/hexo/"><span class="level-start"><span class="level-item">hexo</span></span><span class="level-end"><span class="level-item tag">4</span></span></a></li><li><a class="level is-mobile is-marginless" href="/categories/hexo-Travis-github-action/"><span class="level-start"><span class="level-item">hexo Travis github-action</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><li><a class="level is-mobile is-marginless" href="/categories/jQuery/"><span class="level-start"><span class="level-item">jQuery</span></span><span class="level-end"><span class="level-item tag">1</span></span></a></li><a class="level is-mobile is-marginless" href="/categories/"><span class="level-start"><span class="level-item">查看全部&gt;&gt;</span></span></a></ul></div></div></div><div class="card widget"><div class="card-content"><div class="menu"><h3 class="menu-label">归档</h3><ul class="menu-list"><li><a class="level is-mobile is-marginless" href="/archives/2020/12/"><span class="level-start"><span class="level-item">十二月 2020</span></span><span class="level-end"><span class="level-item tag">3</span></span></a></li><li><a class="level is-mobile is-marginless" href="/archives/2020/11/"><span class="level-start"><span class="level-item">十一月 2020</span></span><span class="level-end"><span class="level-item tag">2</span></span></a></li><li><a class="level is-mobile is-marginless" href="/archives/2020/09/"><span class="level-start"><span class="level-item">九月 2020</span></span><span class="level-end"><span class="level-item tag">4</span></span></a></li><li><a class="level is-mobile is-marginless" href="/archives/2020/08/"><span class="level-start"><span class="level-item">八月 2020</span></span><span class="level-end"><span class="level-item tag">7</span></span></a></li><li><a class="level is-mobile is-marginless" href="/archives/2020/05/"><span class="level-start"><span class="level-item">五月 2020</span></span><span class="level-end"><span class="level-item tag">4</span></span></a></li><a class="level is-mobile is-marginless" href="/archives/"><span class="level-start"><span class="level-item">查看全部&gt;&gt;</span></span></a></ul></div></div></div><div class="card widget"><div class="card-content"><div class="menu"><h3 class="menu-label">标签</h3><div class="field is-grouped is-grouped-multiline"><div class="control"><a class="tags has-addons" href="/tags/ES6/"><span class="tag">ES6</span><span class="tag is-grey-lightest">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/metingJs/"><span class="tag">metingJs</span><span class="tag is-grey-lightest">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/JavaScript/"><span class="tag">JavaScript</span><span class="tag is-grey-lightest">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/LINUX/"><span class="tag">LINUX</span><span class="tag is-grey-lightest">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/OSS/"><span class="tag">OSS</span><span class="tag is-grey-lightest">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/Typescript/"><span class="tag">Typescript</span><span class="tag is-grey-lightest">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/aplayer/"><span class="tag">aplayer</span><span class="tag is-grey-lightest">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/cdn/"><span class="tag">cdn</span><span class="tag is-grey-lightest">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/es5/"><span class="tag">es5</span><span class="tag is-grey-lightest">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/funllscreen/"><span class="tag">funllscreen</span><span class="tag is-grey-lightest">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/git/"><span class="tag">git</span><span class="tag is-grey-lightest">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/github/"><span class="tag">github</span><span class="tag is-grey-lightest">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/github-page/"><span class="tag">github page</span><span class="tag is-grey-lightest">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/git%E5%A4%87%E4%BB%BD/"><span class="tag">git备份</span><span class="tag is-grey-lightest">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/google/"><span class="tag">google</span><span class="tag is-grey-lightest">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/javaScript/"><span class="tag">javaScript</span><span class="tag is-grey-lightest">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/markdown/"><span class="tag">markdown</span><span class="tag is-grey-lightest">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/tools-%E5%AE%9E%E7%94%A8%E5%B7%A5%E5%85%B7/"><span class="tag">+ tools + 实用工具</span><span class="tag is-grey-lightest">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/office2010/"><span class="tag">office2010</span><span class="tag is-grey-lightest">1</span></a></div><div class="control"><a class="tags has-addons" href="/tags/thymeleaft3/"><span class="tag">thymeleaft3</span><span class="tag is-grey-lightest">1</span></a></div></div><div class="field is-grouped is-grouped-multiline"><a class="tags has-addons" href="/tags/"><span class="tag">查看全部&gt;&gt;</span></a></div></div></div></div></div></div></div></section><footer class="footer"><div class="container"><div class="level"><div class="level-start"><a class="footer-logo is-block mb-2" href="/"><img src="https://blog-status.oss-cn-beijing.aliyuncs.com/blog/img20200303171412.png" alt="谢子乾" height="28"></a><p class="size-small"><span>&copy; 2020 XieZiqian</span>    <br><span>© 版权说明：[本网站所有内容均收集于互联网或自己创作,<br>&nbsp;&nbsp;&nbsp;&nbsp;方便于网友与自己学习交流，如有侵权，请<a href="/message" target="_blank">留言</a>，立即处理]<br></span><span><span id="statistic-times">loading...</span><script>function createTime(n){var t=new Date(n);now.setTime(now.getTime()+250),days=(now-t)/1e3/60/60/24,dnum=Math.floor(days),hours=(now-t)/1e3/60/60-24*dnum,hnum=Math.floor(hours),1==String(hnum).length&&(hnum="0"+hnum),minutes=(now-t)/1e3/60-1440*dnum-60*hnum,mnum=Math.floor(minutes),1==String(mnum).length&&(mnum="0"+mnum),seconds=(now-t)/1e3-86400*dnum-3600*hnum-60*mnum,snum=Math.round(seconds),1==String(snum).length&&(snum="0"+snum),document.getElementById("statistic-times").innerHTML="❤️本站自 <strong>"+n.split(" ")[0].replace(/\//g,".")+"</strong> 已运行 <strong>"+dnum+"</strong> 天 <strong>"+hnum+"</strong> 小时 <strong>"+mnum+"</strong> 分 <strong>"+snum+"</strong> 秒！❤️"}var now=new Date;setInterval("createTime('2018/11/11 00:00:00')",250,"")</script><br></span></p><div class="size-small"><span>❤️感谢 <strong><span id="busuanzi_value_site_uv">99+</span></strong> 小伙伴的 <strong><span id="busuanzi_value_site_pv">99+</span></strong> 次光临！❤️</span></div><p></p></div><div class="level-end"><div class="field has-addons"><p class="control"><a class="button is-transparent is-large" target="_blank" rel="noopener" title="Creative Commons" href="https://creativecommons.org/"><i class="fab fa-creative-commons"></i></a></p><p class="control"><a class="button is-transparent is-large" target="_blank" rel="noopener" title="Attribution 4.0 International" href="https://creativecommons.org/licenses/by/4.0/"><i class="fab fa-creative-commons-by"></i></a></p><p class="control"><a class="button is-transparent is-large" target="_blank" rel="noopener" title="Download on GitHub" href="https://github.com/removeif"><i class="fab fa-github"></i></a></p></div><div class="sideMusic" id="myAdlayer"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.css" integrity="sha256-uqQQGnDcmRKvhKwc5Vm4XT1GQ2oV6t1U0NR2N9tV+BQ=" crossorigin="anonymous"><script src="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.js" integrity="sha256-6Y7CJDaltoeNgk+ZftgCD9jLgmGv4xKUo8nQ0HgAwVo=" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script><meting-js style="width:auto;height:2000px" type="playlist" auto="https://y.qq.com/n/yqq/playlist/7375663759.html#stat=y_new.profile.create_playlist.click&amp;dirid=24" theme="#2980b9" loop autoplay order="list" storagename="aplayer-setting" lrctype="0" list-max-height="400px" fixed="true" volume="0.7" list-folded="true"></meting-js></div></div></div></div></footer><script src="https://cdnjs.loli.net/ajax/libs/moment.js/2.22.2/moment-with-locales.min.js"></script><script>moment.locale("zh-CN")</script><script>var IcarusThemeSettings={site:{url:"https://wxperia.com",external_link:{enable:!0,exclude:[]}},article:{highlight:{clipboard:!0,fold:"unfolded"}}}</script><script src="https://cdnjs.loli.net/ajax/libs/clipboard.js/2.0.4/clipboard.min.js" defer></script><script src="https://cdn.jsdelivr.net/gh/wxperia/wxperia.github.io@latest//js/animation.min.js"></script><a id="back-to-top" title="回到顶端" href="javascript:;"><i class="fas fa-chevron-up"></i></a><script src="https://cdn.jsdelivr.net/gh/wxperia/wxperia.github.io@latest//js/back-to-top.min.js" defer></script><script src="https://cdnjs.loli.net/ajax/libs/lightgallery/1.6.12/js/lightgallery-all.min.js" defer></script><script src="https://cdnjs.loli.net/ajax/libs/justifiedGallery/3.7.0/js/jquery.justifiedGallery.min.js" defer></script><script src="https://cdn.jsdelivr.net/gh/wxperia/wxperia.github.io@latest//js/toc.min.js" defer></script><script src="https://cdn.jsdelivr.net/gh/wxperia/wxperia.github.io@latest//js/main.min.js" defer></script><script>$.getScript("https://cdn.jsdelivr.net/gh/wxperia/wxperia.github.io@latest//js/comment-issue-data.min.js",function(){loadIssueData("52c5fa5cd6ab2aba4c38","c153bf2fcf5d1e3784fcb161c2ca5702ca3bcaee","Wxperia","Wxperia.github.io",!1)})</script><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/wxperia/wxperia.github.io@latest//css/insight.min.css"><div class="searchbox ins-search"><div class="searchbox-container ins-search-container"><div class="searchbox-input-wrapper"><input class="searchbox-input ins-search-input" type="text" placeholder="想要查找什么..."><span class="searchbox-close ins-close ins-selectable"><i class="fa fa-times-circle"></i></span></div><div class="searchbox-result-wrapper ins-section-wrapper"><div class="ins-section-container"></div></div></div></div><script>window.INSIGHT_CONFIG={TRANSLATION:{POSTS:"文章",PAGES:"页面",CATEGORIES:"分类",TAGS:"标签",UNTITLED:"(无标题)"},CONTENT_URL:"https://cdn.jsdelivr.net/gh/wxperia/wxperia.github.io@latest//content.json"}</script><script src="https://cdn.jsdelivr.net/gh/wxperia/wxperia.github.io@latest//js/insight.min.js" defer></script></body></html>